<template>
  <page-header-wrapper>
    <page-tab-list></page-tab-list>
    <a-card :bordered="false">
      <a-form-model
        :model="form"
        :label-col="{ span: 6 }"
        ref="ruleForm"
        style="margin-top: 10px"
        :wrapper-col="{ span: 18 }"
        :rules="rules"
      >
        <div style="width: 550px">
          <span class="title" style="font-size: 16px">股东申请设置</span>
          <a-form-model-item style="margin-bottom: 0" label="是否开启强制审核" prop="holder_audit">
            <a-radio-group v-model="form.holder_audit">
              <a-radio :value="1">开启 </a-radio>
              <a-radio :value="0">关闭 </a-radio>
            </a-radio-group>
          </a-form-model-item>
        </div>
        <div class="ts">
          <div>说明：如果开启，客户达到升级条件后，方可申请成为股东，后台审核通过后成为股东；</div>
          <div>如果关闭，客户达到默认股东等级升级条件后，自动升级可进入股东中心，无需审核。</div>
        </div>

        <a-divider />
        <div class="applyBox">
          <div class="applyForm">
            <span class="title" style="font-size: 16px">股东页面申请设置</span>

            <a-form-model-item label="轮播图片" prop="holder_banner">
              <div class="pics">
                <div class="loadImg" v-for="(item, index) in form.holder_banner" :key="index">
                  <img :src="item" alt="" />
                  <a-icon type="close-circle" class="close" @click="deletePic(index)" />
                </div>
                <div class="loadImg add" v-if="form.holder_banner.length < 3" @click="$refs.img.onClickUploadBtn()">
                  <a-icon type="plus" />
                  <span>上传照片</span>
                </div>
              </div>
              <span style="font-size: 14px; color: rgba(0, 0, 0, 0.45)">建议尺寸：750*320</span>
            </a-form-model-item>
            <a-form-model-item label="入驻协议" prop="holder_agreement">
              <WangEditor :value="content" @change="onDescChange"></WangEditor>
              <a-textarea :hidden="true" v-model="form.holder_agreement" />
            </a-form-model-item>
            <a-form-model-item :wrapper-col="{ span: 14, offset: 4 }">
              <a-button type="primary" @click="onSubmit"> 保存 </a-button>
            </a-form-model-item>
          </div>

          <div class="preview">
            <span class="title" style="font-size: 16px">股东申请预览</span>
            <div class="picBox">
              <img src="../../assets/images/apply7.png" alt="" class="head" />
              <div class="picList">
                <el-carousel height="160px">
                  <el-carousel-item v-for="(item, index) in form.holder_banner" :key="index">
                    <div class="pic">
                      <img :src="item" alt="" />
                    </div>
                  </el-carousel-item>
                </el-carousel>
              </div>
              <img src="../../assets/images/apply8.png" alt="" class="foot1" />
              <img src="../../assets/images/apply9.png" alt="" class="foot1" />
            </div>
          </div>
        </div>
      </a-form-model>
    </a-card>
    <storage-select selectNum="1" type="image" ref="img" @onOk="okPic" :hiddenInput="true"> </storage-select>
  </page-header-wrapper>
</template>

<script>
import { applyInfo, submitApplyInfo } from '@/api/shareholder'
import { WangEditor } from '@/components'
export default {
  components: {
    WangEditor,
  },
  data() {
    let checkBanner = (rule, value, callback) => {
      if (!this.form.holder_banner.length) {
        callback(new Error('请上传宣传图片'))
      } else {
        callback()
      }
    }
    return {
      form: {
        holder_banner: [],
        holder_agreement: '',
        holder_audit: 1,
      },
      // 验证规则
      rules: {
        holder_audit: [{ required: true, message: '请选择', trigger: 'change' }],
        holder_banner: [{ validator: checkBanner, trigger: 'change' }],
        holder_agreement: [{ required: true, message: '请输入协议', trigger: 'blur' }],
      },
      // 富文本
      content: '',
    }
  },
  methods: {
    // 上传图片
    okPic(e) {
      // this.form.holder_banner = e
      if (this.form.holder_banner.length < 3) {
        this.form.holder_banner.push(e)
      }
    },
    onDescChange(e) {
      this.form.holder_agreement = e
    },
    onSubmit() {
      this.$refs.ruleForm.validate((valid) => {
        if (valid) {
          this.submit()
        } else {
          return false
        }
      })
    },
    // 获取申请详情
    async getInfo() {
      const hide = this.$message.loading('加载中', 0)
      const res = await applyInfo()
      if (res.code == 0) {
        if (typeof res.data.banner == 'string') {
          this.form.holder_banner = JSON.parse(res.data.banner)
        } else {
          this.form.holder_banner = res.data.banner
        }
        this.form.holder_agreement = res.data.agreement
        this.form.holder_audit = res.data.holder_audit
        this.content = res.data.agreement
        hide()
      }
    },
    // 提交申请
    async submit() {
      const res = await submitApplyInfo(this.form)
      if (res.code == 0) {
        this.$message.success(res.msg)
        this.getInfo()
      } else {
        this.$message.error(res.msg)
      }
    },
    // 点击删除图片
    deletePic(e) {
      this.form.holder_banner.splice(e, 1)
    },
  },
  created() {
    this.getInfo()
  },
}
</script>

<style lang="less" scoped>
.loadImg {
  position: relative;
  margin-right: 8px;
  padding: 8px;
  width: 104px;
  height: 104px;
  background: rgba(0, 0, 0, 0.05);
  border: 1px solid rgba(0, 0, 0, 0.14901960784313725);
  opacity: 1;
  border-radius: 4px;
  display: flex;
  align-items: center;
  flex-direction: column;
  justify-content: center;
  .anticon {
    font-size: 30px;
    color: rgba(0, 0, 0, 0.45);
  }
  img {
    width: 100%;
    height: 100%;
  }
  .close {
    position: absolute;
    right: -5px;
    top: -10px;
    font-size: 18px;
    color: #ff4400;
    cursor: pointer;
  }
}
.add {
  background-color: rgba(0, 0, 0, 0.05);
  border: 1px dashed rgba(0, 0, 0, 0.15);
  cursor: pointer;
}
.applyBox {
  display: flex;
  justify-content: space-between;
  .applyForm {
    width: 550px;
    .pics {
      display: flex;
    }
  }
  .preview {
    width: 375px;
    .picBox {
      margin-top: 20px;
      background-color: #d9d9d9;
    }
    .head {
      width: 100%;
      height: 88px;
    }
    .picList {
      width: 100%;
      .ant-carousel {
        width: 375px;
        height: 160px;
      }
      .pic {
        width: 100%;
        height: 160px;
        img {
          width: 100%;
          height: 100%;
        }
      }
    }
    .foot1 {
      width: 100%;
    }
    .foot2 {
      width: 100%;
      margin-top: 40px;
    }
  }
}

.ts {
  color: rgba(0, 0, 0, 0.45);
  font-size: 14px;
}

.title {
  font-weight: bold;
}
</style>
